<template>  
    <div id="main" ref="echarDom">
            
    </div>
    
</template>
<script setup>
import * as echarts from 'echarts';
import { onUnmounted } from 'vue';  
import { onMounted } from 'vue';
const echarDom= ref(null);
let myChart = null;  
// 基于准备好的dom，初始化echarts实例
onMounted(()=>{
    // console.log(echarDom.value);
    // const w = echarDom.value.offsetWidth;
    // const h = echarDom.value.offsetHeight;

     myChart = echarts.init(echarDom.value);
// 绘制图表
const options = {
    title: {
    text: 'Basic Radar Chart'
  },
  legend: {
    data: ['Allocated Budget', 'Actual Spending']
  },
  radar: {
    // shape: 'circle',
    indicator: [
      { name: 'Sales', max: 6500 },
      { name: 'Administration', max: 16000 },
      { name: 'Information Technology', max: 30000 },
      { name: 'Customer Support', max: 38000 },
      { name: 'Development', max: 52000 },
      { name: 'Marketing', max: 25000 }
    ]
  },
  series: [
    {
      name: '产品趋势',
      left:'center',
      type: 'radar',
      data: [
        {
          value: [4200, 3000, 20000, 35000, 50000, 18000],
          name: 'Allocated Budget'
        },
        {
          value: [5000, 14000, 28000, 26000, 42000, 21000],
          name: 'Actual Spending'
        }
      ]
    }
  ]
}
myChart.setOption(options);

    
})

window.addEventListener("resize",()=>{
    // 重新渲染
    myChart && myChart.resize();
})

// 当前组件卸载时，记得卸载
onUnmounted(()=>{
    myChart.dispose();
})

</script>
<style scoped>
#main{
    height: 400px;
    width: 100%;
    background-color: rgb(241, 246, 246);
    padding-top: 10px;
    margin: 0 20px;
}
</style>

